<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习进度</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-6 py-3 bg-white">
        <span class="text-sm font-medium text-gray-800">9:41</span>
        <div class="flex items-center space-x-1 text-gray-800">
            <i class="fas fa-signal text-sm"></i>
            <i class="fas fa-wifi text-sm"></i>
            <i class="fas fa-battery-three-quarters text-sm"></i>
        </div>
    </div>

    <!-- 头部 -->
    <div class="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-6 text-white">
        <div class="flex items-center justify-between mb-6">
            <i class="fas fa-arrow-left text-xl"></i>
            <h1 class="text-xl font-bold">学习进度</h1>
            <i class="fas fa-share-alt text-xl"></i>
        </div>
        
        <!-- 总体统计 -->
        <div class="text-center">
            <div class="text-4xl font-bold mb-2">127</div>
            <div class="text-white/80 mb-4">已学单词总数</div>
            <div class="flex justify-center space-x-6">
                <div class="text-center">
                    <div class="text-xl font-semibold">15</div>
                    <div class="text-white/80 text-sm">连续天数</div>
                </div>
                <div class="text-center">
                    <div class="text-xl font-semibold">85%</div>
                    <div class="text-white/80 text-sm">正确率</div>
                </div>
                <div class="text-center">
                    <div class="text-xl font-semibold">2580</div>
                    <div class="text-white/80 text-sm">总积分</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-6 py-6 pb-20">
        <!-- 本周学习 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">本周学习</h2>
            <div class="grid grid-cols-7 gap-2 mb-4">
                <div class="text-center">
                    <div class="text-xs text-gray-500 mb-2">周一</div>
                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                    <div class="text-xs text-gray-600 mt-1">12词</div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-500 mb-2">周二</div>
                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                    <div class="text-xs text-gray-600 mt-1">8词</div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-500 mb-2">周三</div>
                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                    <div class="text-xs text-gray-600 mt-1">15词</div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-500 mb-2">周四</div>
                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                    <div class="text-xs text-gray-600 mt-1">10词</div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-500 mb-2">周五</div>
                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                        <span class="text-white text-xs font-bold">5</span>
                    </div>
                    <div class="text-xs text-gray-600 mt-1">今天</div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-500 mb-2">周六</div>
                    <div class="w-8 h-8 bg-gray-200 rounded-full"></div>
                    <div class="text-xs text-gray-400 mt-1">-</div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-500 mb-2">周日</div>
                    <div class="w-8 h-8 bg-gray-200 rounded-full"></div>
                    <div class="text-xs text-gray-400 mt-1">-</div>
                </div>
            </div>
            <div class="text-center text-sm text-gray-600">
                本周已学习 <span class="font-semibold text-blue-500">50</span> 个单词
            </div>
        </div>

        <!-- 学习分类进度 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">分类进度</h2>
            <div class="space-y-4">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-paw text-orange-500"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <span class="font-medium text-gray-800">动物</span>
                            <span class="text-sm text-gray-500">18/20</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-orange-500 h-2 rounded-full" style="width: 90%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-apple-alt text-green-500"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <span class="font-medium text-gray-800">水果</span>
                            <span class="text-sm text-gray-500">15/15</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-palette text-purple-500"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <span class="font-medium text-gray-800">颜色</span>
                            <span class="text-sm text-gray-500">8/12</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-purple-500 h-2 rounded-full" style="width: 67%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成就徽章 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-800">成就徽章</h2>
                <span class="text-blue-500 text-sm font-medium">查看全部</span>
            </div>
            <div class="grid grid-cols-4 gap-4">
                <div class="text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl mx-auto mb-2 flex items-center justify-center">
                        <i class="fas fa-fire text-white"></i>
                    </div>
                    <span class="text-xs text-gray-600">连续学习</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 rounded-xl mx-auto mb-2 flex items-center justify-center">
                        <i class="fas fa-trophy text-white"></i>
                    </div>
                    <span class="text-xs text-gray-600">完美一周</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl mx-auto mb-2 flex items-center justify-center">
                        <i class="fas fa-star text-white"></i>
                    </div>
                    <span class="text-xs text-gray-600">百词达人</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-gray-200 rounded-xl mx-auto mb-2 flex items-center justify-center">
                        <i class="fas fa-lock text-gray-400"></i>
                    </div>
                    <span class="text-xs text-gray-400">待解锁</span>
                </div>
            </div>
        </div>

        <!-- 学习时长统计 -->
        <div class="bg-white rounded-2xl p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">学习时长</h2>
            <div class="text-center mb-4">
                <div class="text-3xl font-bold text-blue-500 mb-1">2小时30分</div>
                <div class="text-gray-500 text-sm">本周总学习时长</div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="text-center p-4 bg-blue-50 rounded-xl">
                    <div class="text-xl font-semibold text-blue-600">25分钟</div>
                    <div class="text-gray-600 text-sm">平均每日</div>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-xl">
                    <div class="text-xl font-semibold text-green-600">45分钟</div>
                    <div class="text-gray-600 text-sm">最长记录</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-3">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">首页</span>
            </div>
            <div class="text-center">
                <i class="fas fa-book text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">学习</span>
            </div>
            <div class="text-center">
                <i class="fas fa-gamepad text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">游戏</span>
            </div>
            <div class="text-center">
                <i class="fas fa-chart-line text-blue-500 text-xl mb-1"></i>
                <span class="text-blue-500 text-xs font-medium">进度</span>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">我的</span>
            </div>
        </div>
    </div>
</body>
</html>